<script setup>
import {onBeforeMount, onMounted, onUnmounted, reactive, ref} from "vue";
import {creatOrder, getCommonGoods, getCommonVips, getVeryVips} from "@/api/vip/good.js";
import {ElMessage} from "element-plus";
import {payOrderById} from "@/api/order/order.js";
// 加载转圈
const loading = ref(false)

// 订单弹出层显示
const orderPop = ref(false)
// 支付弹出层显示
const payPop = ref(false)

// 普通会员
const commonVips = ref([])
// 超级会员
const veryVips = ref([])
// 商品
const commonGoods = ref([])
// 弹出层的商品订单信息，也就是创建订单后从后端返回的订单信息
const orderInfo = ref()

onMounted(() => {
  getCommonVips().then((res) =>
      commonVips.value = res.data
  )
  getVeryVips().then((res) =>
      veryVips.value = res.data
  )
  getCommonGoods().then((res) =>
      commonGoods.value = res.data
  )

  loading.value = false
})
// todo 这个是买vip
function buyVip(id, price) {

}

// todo 触发兑换方法，需要这个商品的id
function exchange(item) {
  // 然后弹出弹出层（提交订单的弹出层界面）
  orderInfo.value = item
  orderPop.value = true
}

function commitOrder(id) {
  const form =  {
    goodId: id,
    account: localStorage.getItem('account')
  }
  // 去调用一个请求，传的参数有商品的id和购买人
  creatOrder(form).then((res) => {
    ElMessage.success('创建订单成功')
    orderPop.value = false
    // 开始计时器
    startCountdown(res.data.endTime)
    // 把失效重置
    expire.value = false
    // 创建后返回的创建订单信息
    order.value = res.data
    // 再弹出一个支付的弹出层
    payPop.value = true

  })
}

const order = ref()

// 倒计时字符串
const countdown = ref('00:00')
// 倒计时字符串
const countdownMinute = ref('0')
// 定时器ID
const timerId = ref()
// 订单是否失效
const expire = ref(false)
function startCountdown(endTime) {
  timerId.value = setInterval(() => {
    const end = new Date(endTime)
    const now = new Date();
    const diff = end - now;

    // 如果时间到了或已经过了，停止倒计时
    if (diff <= 0) {
      clearInterval(timerId.value);
      countdown.value = '00:00';
      countdownMinute.value = 0
      expire.value = true
      // 如果过了时间要将按钮变成灰色
      return;
    }

    // 计算分钟和秒
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    // 格式化并更新倒计时
    countdown.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    countdownMinute.value = minutes
    }, 1000); // 每秒更新一次
}
onUnmounted(() => {
  // 组件销毁前清除定时器
  if (timerId.value) {
    clearInterval(timerId.value);
  }
})
const closeCountDown = () => {
  if (timerId.value) {
    clearInterval(timerId.value);
    countdown.value = '00:00';
    countdownMinute.value = 0
  }
}
const payOrder = (orderId) => {
  if (expire.value) return;

  const data = {
    orderId: orderId
  }
  payOrderById(data).then((res) => {
    ElMessage.success(res.message)
  })
}
</script>

<template>
  <div v-loading="loading" class="container">

    <div class="common-vips">
      <div :class="{'moveTop' : item.id === 1}" v-for="(item,index) in commonVips">
        <img width="300" height="300" :src="item.cover">
        <div style="font-size: 16px;position: absolute;left: 5px;bottom: 40px">{{item.title}}</div>
        <div style="color: #ff5000;font-size: 20px;position: absolute;display: flex;width: 295px;align-items: center;left: 5px;bottom: 5px">
          <span><small>￥</small>{{item.originPrice}}</span>
          <span class="tag-sale" v-if="item.discountType == 1">折后<small>￥</small>{{item.salePrice}}</span>
          <div @click="buyVip(item.id,item.salePrice)" class="tag-buy">购买</div>
        </div>
      </div>
    </div>

    <div style="margin-top: 80px" class="common-vips">
      <div style="padding-bottom: 75px" v-for="(item,index) in veryVips">
        <img width="300" height="300" :src="item.cover">
        <div style="font-size: 16px;position: absolute;left: 5px;bottom: 40px">{{item.title}}</div>
        <div style="color: #ff5000;font-size: 20px;position: absolute;display: flex;width: 295px;align-items: center;left: 5px;bottom: 5px">
          <span><small>￥</small>{{item.originPrice}}</span>
          <span class="tag-sale" v-if="item.discountType == 1">折后<small>￥</small>{{item.salePrice}}</span>
          <div @click="buyVip(item.id,item.salePrice)" class="tag-buy">购买</div>
        </div>
      </div>
    </div>

    <!-- 中间应该加点分割的东西 -->
  </div>

    <div class="common-goods">
      <div v-for="(item,index) in commonGoods">
        <img width="250" height="250" :src="item.cover">
        <div style="width: 220px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: absolute;left: 20px;bottom: 70px">{{ item.title }}</div>
        <small style="position: absolute;left: 20px;bottom: 47px;font-size: 12px;color: #888888">已兑换{{ item.sales }}份</small>
        <small v-if="item.payType === 0" style="position: absolute;left: 20px;bottom: 20px">￥</small>
        <svg v-else-if="item.payType === 1" style="position: absolute;left: 20px;bottom: 20px" t="1725952614505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3544" width="16" height="16"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="3545"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="3546"></path></svg>
        <div style="position: absolute;left: 40px;bottom: 18px;font-weight: bold;color: #cdb670">{{ item.salePrice }}</div>
        <div @click="exchange(item)" class="btn-exchange">兑换</div>
      </div>
    </div>

  <el-dialog style="padding-left: 50px;padding-right: 50px" center v-model="orderPop" width="700">

    <template #header>
      <h2 style="position: relative;left: 16px">提交订单</h2>
    </template>
    <div style="display: flex;color: black">
      <img style="border-radius: 10px" :src="orderInfo.cover" width="150" height="150">
      <div style="width: 300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px 0 0 15px;font-family: 微軟正黑體,serif;font-weight: bold;font-size: 17px">{{ orderInfo.title }}</div>
      <div style="font-family: 'Nirmala UI',sans-serif;font-weight: bold;padding: 10px">
        <small v-if="orderInfo.payType === 0" style="font-size: 12px">￥</small>
        <svg v-else-if="orderInfo.payType === 1" style="position: relative;top: 3px" t="1725952614505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3544" width="16" height="16"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="3545"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="3546"></path></svg>
        {{ orderInfo.originPrice }}
      </div>
    </div>

    <div class="favour-list">
      <h3 style="margin-bottom: 5px">本单可享</h3>
      <div>
        <span>优惠折扣</span>
        <div style="color: #e53865">
          -
          {{ orderInfo.originPrice - orderInfo.salePrice }}
          <span v-if="orderInfo.payType === 0">元</span>
          <span v-else-if="orderInfo.payType === 1">积分</span>
        </div>

      </div>

      <!-- todo 以后还可以扩展新的优惠功能，秒杀，团购，优惠券等  -->

    </div>

    <div style="margin-top: 50px" class="pay-list">
    </div>

    <template #footer>
      <div style="display: flex;justify-content: space-between;align-items: flex-end;color: #e53865">
        <div style="font-weight: bold;">
          <small v-if="orderInfo.payType === 0" style="font-size: 15px">￥</small>
          <svg v-else-if="orderInfo.payType === 1" style="position: relative;top: 1px;display: inline-block;padding-right: 4px" t="1725952614505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3544" width="16" height="16"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="3545"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="3546"></path></svg>
          <span style="font-size: 22px;font-family: 'Nirmala UI',sans-serif">{{ orderInfo.salePrice }}</span>

        </div>
        <div v-if="orderInfo.salePrice !== orderInfo.originPrice" style="padding-bottom: 2px;padding-left: 10px;text-decoration: line-through;color: #7c7c7c" >{{ orderInfo.originPrice }}</div>

        <div @click="commitOrder(orderInfo.id)" class="btn-commitOrder">提交订单</div>
      </div>

    </template>

  </el-dialog>

  <el-dialog style="background: #f2f2f2;border-radius: 8px" v-model="payPop" @close="closeCountDown" width="600">
    <template #header>
      <div style="padding: 10px 25px 0;">
        <h2 style="white-space: pre;font-size: 26px">
          <pre>待支付,  剩余 <span style="color: #f82855">{{ countdown }}</span></pre>
        </h2>
        <div style="font-size: 14.5px;color: #676767;padding: 3px 0">超过{{ countdownMinute }}分钟未支付，订单将自动取消</div>

      </div>
    </template>
    <div style="background: white;border-radius: 10px;padding: 25px 18px 20px;">

      <div style="display: flex;color: black;">
        <img style="border-radius: 8px" :src="orderInfo.cover" width="100" height="100">
        <div>
          <div style="width: 300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 8px 0 0 15px;font-family: 微軟正黑體,serif;font-weight: bold;font-size: 19px">{{ orderInfo.title }}</div>
          <div style="font-size: 17px;font-family: 'Nirmala UI',sans-serif;font-weight: bold;padding: 40px 0 0 15px;">
            <small v-if="orderInfo.payType === 0" style="font-size: 12px">￥</small>
            <svg v-else-if="orderInfo.payType === 1" style="position: relative;top: 2px" t="1725952614505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3544" width="16" height="16"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="3545"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="3546"></path></svg>
            {{ orderInfo.originPrice }}
          </div>
        </div>
      </div>

      <p style="color: #1e1e1e;margin-top: 15px;font-size: 15px">周一至周日可用 · 随时退 · 过期自动退 · 免预约</p>
      <p style="color: #1e1e1e;margin-top: 4px;font-size: 15px">可赠送好友</p>

    </div>
    <div style="margin-top: 10px;background: white;border-radius: 10px;padding: 15px 18px 20px;">
      <h2 style="font-size: 21px" v-if="orderInfo.payType === 0">应付金额 ￥{{ orderInfo.salePrice }}</h2>
      <h2 style="font-size: 21px" v-if="orderInfo.payType === 1">应付积分
        {{ orderInfo.salePrice }}
      </h2>
      <div style="display: flex;justify-content: space-between;padding-right: 50px;font-size: 14px;color: #464646;">
        <div>
          <div style="margin: 10px 0 7px;">订单编号</div>
          <div>下单时间</div>
          <div style="margin-top: 7px">支付方式</div>
        </div>
        <div style="width: 300px;text-align: left">
          <div style="margin: 10px 0 7px;">{{ order.orderId }}</div>
          <div>{{ order.startTime }}</div>
          <div style="margin-top: 7px">
            <span v-if="orderInfo.payType === 0">人民币支付</span>
            <span v-if="orderInfo.payType === 1">积分支付</span>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div style="display: flex;border-radius: 0 0 8px 8px;margin: 50px -16px -16px;padding: 16px;background: white;justify-content: space-between;align-items: center;color: #e53865">
        <span style="font-weight: bold;">
          <small style="font-weight: normal;display: inline-block;margin-right: 1px">实付</small>
          <span style="font-size: 22px;position: relative;top: 1px">{{ orderInfo.salePrice }} </span>
          <span v-if="orderInfo.payType === 0" style="font-size: 17px"> 元</span>
          <span v-else-if="orderInfo.payType === 1" style="font-size: 17px"> 积分</span>
        </span>
        <div v-if="orderInfo.salePrice !== orderInfo.originPrice" style="padding-bottom: 2px;padding-left: 10px;text-decoration: line-through;color: #7c7c7c" >{{ orderInfo.originPrice }}</div>

        <div @click="payOrder(order.orderId)" class="btn-commitOrder" :class="{ 'btn-expire': expire}">去支付</div>

      </div>
    </template>
  </el-dialog>


</template>

<style scoped>
.btn-expire {
  background: linear-gradient(to right, #5b5b5b, #777777)!important;
  cursor: not-allowed!important;
}
pre {
  font-family: 微软雅黑,serif;
}
.btn-commitOrder {
  background: #e8435a;
  cursor: pointer;
  color: white;
  font-size: 17px;
  padding: 12px 55px;
  border-radius: 8px;
}
.favour-list {
  margin: 30px 0 10px;
  font-size: 15px;
  color: #2a2a2a;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.favour-list>div {
  display: flex;
  justify-content: space-between;
}
.btn-exchange {
  background: #fe8503;
  color: white;
  padding: 5px 12px 6px;
  cursor: pointer;
  position: absolute;
  bottom: 15px;
  right: 20px;
  border-radius: 15px;
  font-size: 15px;
}
.common-goods {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  background: #fdf5c3;
  width: 1500px;
  gap: 62.5px;
  padding: 30px calc(50vw - 750px);
}
.common-goods>div {
  background: white;
  padding-bottom: 100px;
  border-radius: 10px;
  position: relative;
}
.tag-sale {
  background-color: rgb(255, 80, 0);
  color: white;
  border-radius: 20px;
  margin-left: 8px;
  padding: 3px 10px;
  display: inline-block;
  font-size: 16px;
}
.tag-buy {
  background: linear-gradient(90deg, rgb(255, 119, 0), rgb(255, 73, 0));
  font-size: 16px;
  padding: 4px 10px;
  color: white;
  font-weight: bold;
  margin-left: auto;
  border-radius: 12px;
  cursor: pointer;
}
small {
  font-size: 14px;
}
.container {
  width: 1500px;
  padding: 0 calc(50vw - 750px);
}
.common-vips>div {
  position: relative;
  background: white;
  padding-bottom: 20px;
}
.moveTop {
  top: 3px;
}
.common-vips, .very-vips {
  display: flex;
  gap: 30px;
  padding: 3px;
  overflow-y: auto;
}
/* 滚动条整体部分 */
.common-vips::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}

/* 滚动条滑块部分 */
.common-vips::-webkit-scrollbar-thumb {
  background: #10d677;
  border-radius: 3px;
}

/* 滚动条轨道部分 */
.common-vips::-webkit-scrollbar-track {
  background: #e5e5e5;
}

/* 当鼠标悬停在滑块上时 */
.common-vips::-webkit-scrollbar-thumb:hover {
  background: #10d67d;
}
</style>
